import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

/*
  全局事件总线：
    作用：实现任意组件通信

    自定义事件：给哪个组件绑定事件，只有这个组件才能触发

    为了实现全局事件总线，解决几个问题：
      
      this.__proto__ === VueComponent.prototype
      VueComponent.prototype.__proto__ === Vue.prototype

      1. 为了让所有组件都能访问：
        VueComponent 原型对象（操作不了）
        Vue 原型对象（引入即可操作）
      
      2. 添加可以绑定事件对象 
        这个事件对象需要有 $on\$once\$off\$emit 这些方法
          Vue.prototype
          vm
          组件实例this
          new Vue()
      
      3. 实现全局事件总线
        Vue.prototype.$globalEventBus = vm

        未来其他组件：
          this.$globalEventBus.$on('xxx', xxx)
          this.$globalEventBus.$emit('xxx')
*/

// 方式一
// Vue.prototype.$globalEventBus = new Vue();

const vm = new Vue({
  beforeCreate() {
    // 方式二
    // 绑定全局事件总线对象
    // Vue.prototype.$globalEventBus = this;
    Vue.prototype.$bus = this;
  },
  render: (h) => h(App),
}).$mount("#app");

console.log(Vue.prototype);
console.log(vm.__proto__);
console.log(Vue.prototype === vm.__proto__);
